<html>
<head>
<title>对象语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"></div>

</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isActive:true,
			error:null
		},
		computed:{
			classObject:function(){
				return {
					active:this.isActive && this.error,
					'text-danger': this.error && this.error.type === 'fatal'
				}
			}
		}
		
	})
</script>

<!--v-model使用-->
<div id="example-3">
<!--复选框-->
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label>
	<input type="checkbox" id="john" value="John" v-model="checkedNames">
	<label for="john">John</label>
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	<label for="mike">Mike</label><br/>
	<span>checked Names:{{checkedNames}}</span><br/>
	<!--单个复选框，绑定布尔值-->
	<input type="checkbox" id="checkbox" v-model="checks">
	<label for="checkbox">{{checks}}</label><br/>
	<!--单选按钮-->
	
	<span>Picked:{{pinked}}</span><br/>
	<input type="radio" id="one" value="one" v-model="pinked">
	<label for="one">One</label><br/>
	<input type="radio" id="two" value="two" v-model="pinked">
	<label for="two">Two</label><br/>
	
	<!--单选下拉框-->
	<span>Selected:{{selected}}</span><br/>
	<select v-model="selected">
		<option disabled value="">==请选择==</option>
		<option value="大">大</option>
		<option value="中">中</option>
		<option value="小">小</option>
	</select>
	<br/>
	<!--多选时为一个数组-->
	<span>Selected:{{selects}}</span><br/>
	<select multiple v-model="selects" style="width:50px;">
		<option value="大">大</option>
		<option value="中">中</option>
		<option value="小">小</option>
	</select>
	<br/>
	
<!--用v-for渲染一个动态的下拉框-->
	<span>Selected:{{selects2}}</span><br/>
	<select v-model="selects2">
		<option v-for="option in options" v-bind:value="option.value">
		{{option.text}}</option>
	</select>
	<br/>
	<li v-for="n in eventNumbers">{{n}}</li>
	<br/>
	<span v-for="n in 10">{{n}}</span>
</div>
<script>
	var vm=new Vue({
		el:'#example-3',
		data:{
			checks:false,
			checkedNames:[],
			pinked:'',
			selected:'',
			selects:[],
			selects2:'==请选择==',
			options:[
				{text:'zero',value:'==请选择=='},
				{text:'one',value:'大'},
				{text:'two',value:'中'},
				{text:'three',value:'小'}
			],
			numbers:[
				'1','3','4','5','7'
			]
		},
		computed:{
			eventNumbers:function(){
				return this.numbers.filter(function(number){
					return number % 2===0
				})
			}
		}
		
	})
</script>

	<div id="id2">
		<form v-on:sumbit.prevent="addNewTodo">
		<label for="new-todo">Add a todo</label>
		<input v-model="newTodoText"
			id="new-todo"
			placeholder="E.g. Feed the cat">
		<button>Add</button>
		</form>
		<ul>
			<li is="todo-item" v-for="(todo,index) in todos"
				v-bind:key="todo.id"
				v-bind:title="todo.title"
				v-on:remove="todos.splice(index,1)"></li>
		</ul>
	</div>
	
	<script>
	Vue.component('todo-item', {
		template: '\
			<li>\
			  {{ title }}\
			  <button v-on:click="$emit(\'remove\')">Remove</button>\
			</li>\
		  ',
		props: ['title']
	})
	new Vue({
		el:'#id2',
		data:{
			newTodoText:'',
			todos:[
				{id:1,title:'Do the Dashed',},
				{id:2,title:'Take out the trash',},
				{id:3,title:'Mow the lawn'}
			],
			nextTodoId:4
		},
		methods:{
			addNewTodo:function(){
				this.todos.push({
					id:this.nextTodoId++,
					title:this.newTodoText
				})
				this.newTodoText=''
			}
		}
	})
	</script>
</body>
</html>